<template>
	<view class="dialResult-container">
		<u-navbar
			:title="$t('facility.name25')"
			:autoBack="true"
			:placeholder="true"
		>
		</u-navbar>
		<view class="" style="display: flex;justify-content: flex-end;margin-bottom: 10rpx;">
			<view class="" @tap="dialInfoModal = true" style="font-size: 14px;">{{$t('bound.name64')}}</view>
		</view>
		<view class="dialResult-nav">
			<u-grid :border="false" @click="click" col="4">
				<u-grid-item>
					<text style="color: #000;font-weight: 600;">{{resultList.num}}</text>
					<text class="grid-text">{{$t('bound.name65')}}</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #5990FF;font-weight: 600;">{{resultList.successNum}}</text>
					<text class="grid-text">{{$t('bound.name66')}}</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #5990FF;font-weight: 600;">{{resultList.errorNum}}</text>
					<text class="grid-text">{{$t('bound.name67')}}</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #3aa74a;font-weight: 600;">{{resultList.netNum}}</text>
					<text class="grid-text">{{$t('bound.name68')}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="dialResult-main">
			<view class="dialInfo-item-box" v-for="(item,index) in resultList.list" :key="index">
				<view class="dialInfo-item-nav">
					<view class="nav-left">
						<view class="network">
							<text>{{$t('bound.name41')}}：</text>
							<text>{{item[0].ifName}}</text>
						</view>
						<view class="rate">
							<text>{{$t('bound.name42')}}：</text>
							<text>{{item[0].speed}}M</text>
						</view>
					</view>
					<view class="nav-right" v-if="resultList.timingtime > 0">
						<text style="color: #5990FF;">{{isTime}}s</text>{{$t('bound.name69')}}
					</view>
				</view>
				<!-- <view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">共{{item.children.length}}条线路</view> -->
				<view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">{{$t('bound.name43')}}{{item.length}}{{$t('bound.name44')+$t('bound.name45')}}</view>
				<view class="dialInfo-table">
					<view class="tr bg-w">
						<view class="th flex-center" style="width: 20%;">{{$t('bound.name70')}}</view>
						<view class="th" style="width: 50%;">{{$t('bound.name71')}}</view>
						<view class="th" style=""></view>
						<view class="th flex-center">{{$t('bound.name72')}}</view>
					</view>
					<view class="tr" v-for="(val,ind) in item">
						<view class="td flex-center" style="text-align: center;width: 20%;">{{ind + 1}}</view>
						<view class="td" style="width: 50%;margin: 10rpx 0;">
							<view class="">{{netType==1?val.vlanAccount:val.vlanIp}}</view>
							<view class="" style="color: #999;font-size: 20rpx;" v-if="netType==1">
								{{$t('bound.name47')}}:{{val.vlanPassword}}</view>
							<view class="" style="color: #999;font-size: 20rpx;" v-else>{{$t('bound.name63')}}:{{val.gateway}}</view>
						</view>
						<view class="td" style="color: #999;">vlan ID: {{val.vlanId}}</view>
						<!-- <view class="td flex-center" style="text-align: center;color: #FE5102;">拨号中</view> -->
						<view class="td flex-center" :style="{color:dialResultColor[val.result]}"
							style="text-align: center;font-size: 20rpx;">
							{{dialResult[val.result]}}/{{dialNet[val.onNet]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="">
				<u-button type="warning" customStyle="width: 300rpx;font-weight:600" color="#979797" :text="$t('bound.name73')"
					@click="handleEditLine"></u-button>
			</view>
			<view class="">
				<u-button type="warning" customStyle="width: 300rpx;font-weight:600" color="#5990FF" :text="$t('bound.name74')"
					@click="handleNext"></u-button>
			</view>
		</view>
		<u-modal :show="dialInfoModal" :title="$t('bound.name64')" @cancel="dialInfoModal = false" @confirm="dialInfoModal = false">
			<view class="">
				<view class="">{{$t('bound.name75')}}</view>
				<view class="">{{$t('bound.name76')}}</view>
				<view class="">{{$t('bound.name77')}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialInfoModal: false,
				sn: '32_HH_CC57C84B7F30C5AE-DISKSN',
				resultList: {},
				dialResult: [this.$t('bound.name78'), this.$t('bound.name79'), this.$t('bound.name80')],
				dialResultColor: ['#5990FF', '#45ca57', '#da080c'],
				dialNet: [this.$t('bound.name81'), this.$t('bound.name82')],
				isTime: 60,
				netType: 1
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('facility.name25')
			})
		},
		onLoad(options) {
			this.sn = options.sn
			this.netType = options.netType
		},
		onShow() {
			this.getResult()
		},
		onNavigationBarButtonTap() {
			this.dialInfoModal = true
		},
		onHide() {
			clearInterval(this.IntervalTime)
		},
		beforeDestroy() {
			clearInterval(this.IntervalTime)
		},
		methods: {
			// 确认提交
			handleNext() {
				this.$fun.jump(`/pages/equipment/equipment`)
			},
			// 调整线路
			handleEditLine() {
				this.$fun.jump(`/pageC/dialInfo/dialInfo?sn=${this.sn}&netType=${this.netType}`)
			},
			// 获取拨号结果
			async getResult() {
				uni.showLoading({
					title: '',
					mask: true
				})
				const res = await this.$fun.ajax.post('butt/queryDialResult', {
					sn: this.sn
				})
				if (res && res.code == 1) {
					uni.hideLoading()
					// 数据去重
					// let newArr = []
					// res.data.vlanInfoList.forEach((item=>{
					// 	const isFlag = newArr.find(i=>i.ifName == item.ifName)
					// 	if(!isFlag){
					// 		newArr.push(item)
					// 	}
					// }))
					// newArr.forEach((item=>{
					// 	item.children = []
					// 	res.data.vlanInfoList.forEach(v=>{
					// 		if(item.ifName == v.ifName){
					// 			item.children.push(v)
					// 		}
					// 	})
					// }))
					// res.data.nicList = newArr
					this.resultList = res.data
					this.isTime = res.data.timingtime
					if (res.data.timingtime > 0) {
						this.IntervalTime = setInterval(() => {
							if (this.isTime <= 0) {
								clearInterval(this.IntervalTime)
								this.isTime = 60
								this.getResult()
							}
							this.isTime--
						}, 1000)
					}

				}
			},
			click(name) {
				// this.$refs.uToast.success(`点击了第${name}个`)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;
	}

	.dialResult-container {
		padding: 20rpx 20rpx 100rpx;

		.dialResult-nav {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.grid-text {
				color: #999;
				font-size: 14px;
			}
		}

		.dialResult-main {
			.dialInfo-item-box {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.dialInfo-item-nav {
					display: flex;
					justify-content: space-between;
					font-size: 22rpx;

					.nav-left {
						display: flex;
					}

					.nav-right {
						color: #999;
					}

					.network {
						margin-right: 20rpx;
						color: #5990FF;
					}

					.rate {}
				}

				.dialInfo-table {
					font-size: 24rpx;

					.tr {
						display: flex;
						width: 100%;
						justify-content: center;
						height: 60rpx;
						align-items: center;
						border-radius: 10rpx;
						margin: 15rpx 0;
					}

					.td {
						width: 40%;
						// justify-content: center;
						// text-align: center;
						overflow: hidden;
						margin: 0 10rpx;
						font-size: 22rpx;
						color: #000;
						;
					}

					.flex-center {
						justify-content: center;
						// text-align: center;
					}

					.th {
						width: 40%;
						color: #000;
						display: flex;
						height: 3rem;
						align-items: center;
						overflow: hidden;
						margin: 0 10rpx;
					}

					.bg-w {
						background: #f0f0f0;
					}

					th {
						font-weight: 500;
					}

					td {
						// font-size: 12px;
					}

					.table-placeholder {
						font-size: 14px;
					}

					.delete {
						.u-icon--right {
							flex-direction: column;
						}
					}
				}
			}
		}

		.bottom {
			background-color: #fff;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 50rpx;
			display: flex;
			justify-content: space-between;

		}
	}
</style>